<template>
  <div class="main-q">
    <el-card class="chat-room" shadow="none">
      <div class="chat-messages">
        <div v-for="message in consultation" :key="message.id" :class="{'message-left': message.sender !== username, 'message-right': message.sender === username}" class="message">
          <span v-if="message.sender === username" class="msg-online">
            <label class="text-right">{{ message.sender }}</label><br>
            <el-badge class="item2">
              <el-button class="contentOfChat2" round>{{ message.letter }}</el-button>
            </el-badge>
          </span>
          <span v-else class="msg-online">
            <label class="text-left">{{ message.sender }}</label><br>
            <el-badge class="item1">
              <el-button class="contentOfChat1" round>{{ message.letter }}</el-button>
            </el-badge>
          </span>
        </div>
      </div>
    </el-card>
    <div class="message-input">
      <textarea v-model="newMessageData.letter" placeholder="输入消息..." rows="6" class="contentText"></textarea>
      <el-button @click="sendMessage">发送</el-button>
    </div>
  </div>
</template>

<script>
import axios, { AxiosError } from 'axios'
export default {
    name: 'Question',
    data() {
    return {
      consultation:[],
      username : localStorage.getItem('username'),
      newMessageData:{
        letter:'',
        msgType:1,
        sender:'',
        recipient:''
      }
    };
  },
  methods: {
    async sendMessage() {
      if(this.newMessageData.letter.trim() !==''){
        this.newMessageData.recipient = (this.consultation[0].sender == this.username) ? this.consultation[0].recipient : this.consultation[0].sender;
        this.newMessageData.sender = this.username
        console.log(this.newMessageData)
        this.consultation.push({
          letterId:this.consultation.length + 1,
          letter : this.newMessageData.letter,
          msgType : 1,
          recipient : this.newMessageData.recipient,
          sendTime : this.consultation[0].sendTime,
          sender : this.username,
          view : 0    
        })
        const [err,result] = await this.promise_error_process(this.writeLetterByAjax())
        this.newMessageData.letter =''
        if(err){
          console.log(err)
        }
        else{
          console.log(result)
        }
      }else{
        console.log('输出不能为空！')
      }
    },
    //使用结构赋值进行异常处理
    promise_error_process(promise){
          return promise.then(data=>[null,data])
                          .catch(err=>[err,null])
    },
    async getConsultationByAjax(){
        const response = await axios({
        url				      : `http://127.0.0.1:8080/api/column/consultMsg/${this.username}/${1}`,
        method			    : 'GET',
        withCredentials : true
      })
        return response
      },
      async getConsultation(){
        const [err,result] = await this.promise_error_process(this.getConsultationByAjax())
        if(err){
          console.log(err)
        }
        else{
          console.log(result)
          this.consultation = result.data.data.consultation
        }
      },
      async writeLetterByAjax(){
        const response = await axios({
        url				      : 'http://127.0.0.1:8080/api/column/writeLetter',
        method			    : 'POST',
        withCredentials : true,
        headers			: {
    				'Content-Type'	: 'application/json'
  					},
        data : this.newMessageData    
      })
        return response
      }
  },
  created(){
    this.getConsultation()
  }
}
</script>

<style scoped>
  .main-q {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.chat-room {
  width: 50%;
  height: 400px;
  overflow-y: scroll;
  padding: 10px;
}

.chat-messages {
  margin-bottom: 10px;
}

.message {
  margin: 10px;
  height: 70px;
}
.msg-online{
  margin-bottom: 20px;
}

.message-left {
  text-align: left;
}

.message-right {
  text-align: right;
}

.message-input {
  width: 50%; /* 与chat-room等宽 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #f9f9f9;
  border-top: 1px solid #ccc;
  position: relative;
  border-radius: 10px;

}
.item1 {
  margin-bottom: 15px;
  margin-right: 20px;
}
.item2 {
  margin-bottom: 15px;
  margin-left: 20px;
}

.text-left{
  text-align: left;
  border: #060709;
  font-size: 12px;
  margin-top: 10px;
}
.text-right{
  border: #060709;
  font-size: 12px;
}
.contentOfChat1{
    background-color: #409EFF;
    color: white;
    pointer-events: none;
    width: 100%;
    white-space: normal;
    height: auto;
    white-space: normal; 
    word-wrap: break-word;
    letter-spacing: 2px; /* 调整字间距 */
    line-height: 1.5; /* 调整行间距 */
    text-align: left; /* 文本左对齐 */
}
.contentOfChat2{
    background-color: #e1e2e2;
    pointer-events: none;
    width: 100%;
    white-space: normal;
    height: auto;
    white-space: normal; 
    word-wrap: break-word;
    letter-spacing: 2px; /* 调整字间距 */
    line-height: 1.5; /* 调整行间距 */
    text-align: left; /* 文本左对齐 */
}
.message-input textarea {
  height: 120px; /* 设置输入框的高度 */
  padding: 5px; /* 可以根据需要调整内边距 */
  width: 100%;
}

.message-input button {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 15px; /* 可以根据需要调整外边距 */
  width: 13%;
  background-color: #409EFF;
  color: white;
  line-height: 15px;
}
.contentText{
  font-size: large;
  border: #060709;
}

</style>